<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ include file="/pages/common/header.jsp"%>
</head>
<body onload="init('selected','unSelected');" >
	<div class="contentBody contentborder">
		<div class="tab-pane" id="tabPane">
			<div id="message"><%=message %></div>
			<div class="tab-page" id="tabPage1">
				<h1 class="tab">角色用户配置</h1>
				<div class="contentborder tableForm">
					<jdf:form bean="entity" scope="request">
						<form action="<%=dynamicDomain%>/role/saveRoleUser" method="post" name="UserRole" id="UserRole" onsubmit="prepare();">
							<input type="hidden" name="roleId" value="${role.objectId}">
							<table class="inputTable">
							    <tr>
									<td nowrap class="label cancelBorderLeft cancelBorderRight" colspan="3" style="width: 100%;">
										<div style="width: 49%;text-align: center;float: left;">已授权用户：</div>
										<div style="width: 49%;text-align: center;float: left;">待授权用户：<input class="text" type="text" name="unauthorized" id="unauthorized" size="20"/> 
										<button type="button"  id="save" onClick="javascript:doMyFilter(document.UserRole.unauthorized.value,document.UserRole.unSelected,2);">过滤</button></div>
									</td>
								</tr>
								<tr height="height: 300px;">
									<td nowrap class="content" style="width: 48%;padding: 15px;">
										<select name="menuId" id="selected" multiple="multiple" size="20" style="width: 100%;" ondblclick="moveIt(selected,unSelected,1)">
											<jdf:selectCollection items="haveMenus" optionValue="objectId" optionText="fullName"/>
										</select>
									</td>
									<td class="content" style="width: 20px;text-align: center;vertical-align: middle;">
											<img title="添加选中" src="<jdf:theme/>images/oneLeft.gif" id="rightToLeft" onClick="moveIt(unSelected,selected,2)" class="moveButton">
											<img title="删除选中" src="<jdf:theme/>images/oneRight.gif" id="leftToRight" onClick="moveIt(selected,unSelected,1)" class="moveButton">
									</td>
									<td nowrap class="content" style="width: 48%;padding: 15px;">
										<select name="unSelected" id="unSelected" multiple="multiple" size="20" style="width: 100%;" ondblclick="moveIt(unSelected,selected,2)">
											<jdf:selectCollection items="notHaveMenus" optionValue="objectId" optionText="fullName"/>
										</select>
									</td>
								</tr>
								<tr>
									<td class="bottomLabel" nowrap colspan="3">
										<div class="right">
											<button type="submit">保存</button>
											<button type="button" onclick="toUrl('<%=dynamicDomain%>/role/page')">返回</button>
										</div>
									</td>
								</tr>
							</table>
						</form>
					</jdf:form>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		function prepare() {
			var theform = document.UserRole;
			var userIdSelected = theform.selected;
			for(var i = userIdSelected.options.length-1; i >= 0; i--){
				userIdSelected.options[i].selected = true;
			}
			$("#unSelected").empty();
		}
		var leftArray = new Array();
		var rightArray = new Array();
		var lastRightArray = new Array();
		var currentLeftArray = new Array();
		function init(leftSelectId,rightSelectId){                   //初始化左边右边文本框的值
			var leftSelect = document.getElementById(leftSelectId);
			var rightSelect = document.getElementById(rightSelectId);
				for (var i = 0; i < leftSelect.length; i++) {        //左边文本框的值放入leftArray
					leftArray[i] = new Array();
   				leftArray[i].text=leftSelect.options[i].text;
   				leftArray[i].value=leftSelect.options[i].value;
			}
				for (var i = 0; i < rightSelect.length; i++) {       //右边文本框的值放入rightArray
					rightArray[i] = new Array();
   				rightArray[i].text=rightSelect.options[i].text;
   				rightArray[i].value=rightSelect.options[i].value;
			}
			lastRightArray =copyArray(rightArray);                     //左边最后文本框的值放入lastRightArray
			print(lastRightArray);
		}
		function destroy(){
			leftArray.length = 0;
			rightArray.length = 0;
			lastRightArray.length = 0;
			currentLeftArray.length = 0;
		}	
		function print(arr){
			var s = "";
			for(var i=0;i<arr.length;i++){
				s += arr[i].value + ",";
			}
			//document.getElementById("message").innerHTML=s;
		}
		function leftToRight(leftDel){                              //把左边文本框的值导入右边
			var temp = new Array();
			for(var i =0;i<leftArray.length;i++){
				var flag = 0;
				for(var j =0;j<leftDel.length;j++){
					if(leftArray[i].value == leftDel[j].value){
						rightArray.push(leftArray[i]);
						flag = 1;
						break;
					}
				}
				if(flag==0){
					temp.push(leftArray[i]);
				}
			}
			leftArray = copyArray(temp);
			selectOptions = copyArray(leftArray);
			lastRightArray=copyArray(rightArray);
			print(leftArray);
		}

		function copyArray(source){
			var target = new Array();
			for(var i=0;i<source.length;i++){
				var kk = target.length;
	            target[kk] = new Array();
	            target[kk].value=source[i].value;
	            target[kk].text=source[i].text;
			}
			return target;
		}
		
		function rightToLeft(rightDel){
			var temp = new Array();
			print(leftArray);
			for(var i =0;i<rightArray.length;i++){
				var flag = 0;
				for(var j =0;j<rightDel.length;j++){
					if(rightArray[i].value == rightDel[j].value){
						flag = 1;
						leftArray.push(rightArray[i]);
						break;
					}
				}
				if(flag==0){
					temp.push(rightArray[i]);
				}
			}
			rightArray = temp;
			selectOptions = copyArray(leftArray);
			lastRightArray=copyArray(rightArray);
			print(leftArray);
		}
		
		function moveIt(oSource, oTarget,direct) {
		    if (!oSource.options.length) {
		        return;
		    }
		    if (oSource.selectedIndex == -1) {
		    	return selectMoveAll(oSource, oTarget);
		        destroy();
		        init('selected','unSelected');
		    }
		    var mySld = new Array();
		    var del = new Array();
		    for (i = 0; i < oSource.options.length; i++) {
		        if (oSource.options[i].selected) {
		            mySld[mySld.length++] = i;
		            var kk = del.length;
		            del[kk] = new Array();
		            del[kk].value=oSource.options[i].value;
		            del[kk].text=oSource.options[i].text;
		        }
		    }
		    for (i = 0; i < mySld.length; i++) {
		        oTarget.options.length++;
		        oTarget.options[oTarget.options.length - 1].text = oSource.options[mySld[i]].text;
		        oTarget.options[oTarget.options.length - 1].value = oSource.options[mySld[i]].value;
		    }
		    for (i = 0; i < mySld.length; i++) {
		        for (j = mySld[i] - i; j < oSource.options.length - 1; j++) {
		            oSource.options[j].text = oSource.options[j + 1].text;
		            oSource.options[j].value = oSource.options[j + 1].value;
		        }
		        oSource.options.length--;
		    }
		    if (oSource.options.length >= 1) {
		        oSource.options.selectedIndex = -1;
		    }
		    if(direct==1){
		    	leftToRight(del);
		    }else if(direct==2){
		    	rightToLeft(del);
		    }
		    destroy();
		    init('selected','unSelected');
		}
		
		function selectMoveAll(s, t) {
		    var n = t.options.length;
		    t.options.length = n + s.options.length;
		    for (i = n; i < t.options.length; i++) {
		        t.options[i].text = s.options[i - n].text;
		        t.options[i].value = s.options[i - n].value;
		    }
		    s.options.length = 0;
		}
		
		var flag = false;
		function doMyFilter(input, select_obj,formType) {
			var input_value = "";
			var doFilterRightArray;
			if(formType == 1){
				input_value=input.options[input.selectedIndex].text;
				doFilterRightArray=copyArray(lastRightArray);
				flag = true;
			}else if(formType == 2){
				input_value=input;
				if(flag){
					doFilterRightArray=copyArray(currentLeftArray);
				}else{
					doFilterRightArray=copyArray(lastRightArray);
				}
			}
			
 		    if (input_value == "") {
 		        select_obj.options.length = 0;
 		        if(formType==1){
 					currentLeftArray=copyArray(lastRightArray);
 				}
     			for (var i = 0; i < lastRightArray.length; i++) {
     				var option = new Option(lastRightArray[i].text,lastRightArray[i].value);
         			select_obj.options[i] = option;
     			}
    			
 		    }else{
 			    var keystr = input_value;
 	            var new_selectOptions = new Array(); 
 	            for(var i=0;i<doFilterRightArray.length;i++){
 	            	if(doFilterRightArray[i].text.indexOf(keystr)!=-1){
 	            		new_selectOptions[new_selectOptions.length] = doFilterRightArray[i];
 	            	}
 	            }
 				if(formType==1){
 					currentLeftArray=copyArray(new_selectOptions);
 				}
     			if (select_obj.options != new_selectOptions) {
         			select_obj.options.length = 0;
         			for (var i = 0; i < new_selectOptions.length; i++) {
         				var option = new Option(new_selectOptions[i].text,new_selectOptions[i].value);
             			select_obj.options[i] = option;
         			}
         		}
 		    }
		}

	</script>
</body>
</html>